<!-- 土壤监测 -->

<template>
	<!-- 土壤监测器的信息 -->
	<view >
		<uni-card title="土壤检测"  sub-title="D8602032700"  extra="额外信息" :thumbnail="avatar">
			<view class="modechooose">
				<text class="uni-body">未激活</text>
				<text class="uni-body">影子模式</text>
			</view>
		</uni-card>
	</view>
	
	<!-- 土壤的相关数据 -->
	<view class="datalang">
		<uni-segmented-control :current="current" :values="itemsturang" @clickItem="onClickItem" styleType="text" activeColor="#4cd964"></uni-segmented-control>
		        <view class="content">
		            <view v-if="current === 0">
		                <view>
							<uni-card :is-shadow="false" >
								<view class="uni-list-cell uni-list-cell-pd">
									<view class="uni-list-cell-db">是否开启实时数据</view>
									<switch checked />
								</view>
							</uni-card>
							
							<view class="datadetail">
								<view class="detail_item" v-for="(item,index) in soilMeasureDataList" :key="item.id">
									<uni-card padding="0" spacing="0" :thumbnail="avatar" class="fixed-size-card">
										<!-- <template v-slot:cover>
											<view class="custom-cover-dapeng"  >
												<image  :src="item.img" >
												</image>
											</view>
										</template> -->
										<uni-list>
											<uni-list-item :title="item.measureName" ></uni-list-item>
										</uni-list>
										<view class="datadetail-small">
										    <view class="uni-body1">{{ item.measureValue }}</view>
										    <view class="uni-body2">{{ item.measureUnit }}</view>
										</view>
									</uni-card>
								</view>
								
							</view>
							

							
							
							
						</view>
		            </view>
		            <view v-if="current === 1">
		                设备控制
		            </view>
					
		            <view v-if="current === 2">
		                设备日志
		            </view>
					
					<view v-if="current === 3">
						<view class="charts-box">
						    <qiun-data-charts 
						      type="line"
						      :opts="optsSoilDLJ"
						      :chartData="chartDataSoilDLJ"
						    />
						</view>
						<view class="charts-box">
						    <qiun-data-charts 
						      type="line"
						      :opts="optsSoilTemperature"
						      :chartData="chartDataSoilTemperature"
						    />
						</view>
						<view class="charts-box">
						    <qiun-data-charts 
						      type="line"
						      :opts="optsSoilPh"
						      :chartData="chartDataSoilPh"
						    />
						</view>
					</view>
					
		        </view>
					
	</view>
</template>

<script setup>
import  {ref} from "vue"
import { getAllSoilMeasureDataList,getSoilMeasureDataInfos } from "@/api/duorou/soilMonitoring";
import { getDeviceListByHouseID } from "@/api/duorou/dapengDeviceBind";
import { getDataAnalysisByWeek } from "@/api/duorou/soilMonitoring"; 
import { onLoad } from '@dcloudio/uni-app'


const deviceCategoryId=ref(null)
const greenhouseId=ref(null)
onLoad((options)=>{
	console.log("获取到的页面参数",options)
	deviceCategoryId.value=options.deviceCategoryId
	greenhouseId.value=options.greenhouseId
	getAllSoilMeasureData()
})

const avatar = ref("../../../../static/images/soil.png")

//分段器
const itemsturang = ref(['数据采集', '设备控制', '设备日志','数据分析'])
const current =ref(0)
function onClickItem(e){
	if (current.value != e.currentIndex) {
	        current.value = e.currentIndex;
			getSubTabPageData(current.value);
			
	}
}

//土壤设备的测量参数
const soilMeasureDataList = ref([
	{
		id:1,
		name: '土壤含氮量',
        value: 15,
        unit: 'mg/kg',
		img:'../../../../static/images/soil.png'
	},
	{
	    id: 2,
	    name: '土壤导电率',
	    value: 15,
	    unit: 'mg/kg',
	},
	{
		id: 3,
		name: '土壤含盐分',
		value: 15,
		unit: 'mg/kg',
		
	},
	{
		id: 4,
		name: '土壤含磷量',
		value: 15,
		unit: 'mg/kg',
		
	},
	{
		id: 5,
		name: '土壤含钾量',
		value: 15,
		unit: 'mg/kg',
	},
	{
		id: 6,
		name: '土壤酸碱度',
		value: 15,
		unit: 'mg/kg',
	}
]);

const iotDevice=ref(null) 
/**
 * 获取所有土壤设备中的测量数据
 */
function getAllSoilMeasureData(){
	getDeviceListByHouseID({greenhouseId:greenhouseId.value,deviceCategoryId:deviceCategoryId.value,current:1,size:1})
	.then(res=>{
		iotDevice.value=res.data.data[0];
		console.log("获取所有设备值",iotDevice.value)
		getAllSoilMeasureDataList({current:1,size:10,iotDeviceId:iotDevice.value.id})
		.then(res=>{
			const latestDevData=res.data.data.records[0]
			getSoilMeasureDataInfos({size:10,current:1,kgnpkDevDataId:latestDevData.id})
			.then(res=>{
				console.log("获取所有土壤测量数据",res)
				const soilMeasureList=res.data.data.records
				soilMeasureDataList.value=soilMeasureList;
			})
		})
	})
}


function getSubTabPageData(current){
	if(current===3){
		getNPKdata();
		getSoilTemData();
		getSoilPhData();
	}
}

/**
 * 获取土壤氮磷钾的数据
 */
function getNPKdata(){
	getDataAnalysisByWeek({iotDeviceId:iotDevice.value.id,measureName:"土壤含氮量"})
	.then(res=>{
		const dataList=res.data.data
		let xdata=dataList.map(item=>{
			return item.xdataDateStr.substring(5);
		}) 
		let ydata=dataList.map(item=>{
			return item.measureValue
		})
		chartDataSoilDLJ.value.categories=xdata
		chartDataSoilDLJ.value.series[0]={name:"土壤含氮量",data:ydata}
	})
	getDataAnalysisByWeek({iotDeviceId:iotDevice.value.id,measureName:"土壤含钾量"})
	.then(res=>{
		const dataList=res.data.data
		let ydata=dataList.map(item=>{
			return item.measureValue
		})
		chartDataSoilDLJ.value.series[1]={name:"土壤含钾量",data:ydata}
	})
	getDataAnalysisByWeek({iotDeviceId:iotDevice.value.id,measureName:"土壤含磷量"})
	.then(res=>{
		const dataList=res.data.data
		let ydata=dataList.map(item=>{
			return item.measureValue
		})
		chartDataSoilDLJ.value.series[2]={name:"土壤含磷量",data:ydata}
	})
}

/**
 * 获取土壤温度的数据
 */
function getSoilTemData(){
	getDataAnalysisByWeek({iotDeviceId:iotDevice.value.id,measureName:"土壤温度"})
	.then(res=>{
		const dataList=res.data.data
		let xdata=dataList.map(item=>{
			return item.xdataDateStr.substring(5);
		}) 
		let ydata=dataList.map(item=>{
			return item.measureValue
		})
		chartDataSoilTemperature.value.categories=xdata
		chartDataSoilTemperature.value.series[0]={name:"土壤温度",data:ydata}
	})
}
/**
 * 获取土壤PH值的数据
 */
function getSoilPhData(){
	getDataAnalysisByWeek({iotDeviceId:iotDevice.value.id,measureName:"土壤pH值"})
	.then(res=>{
		const dataList=res.data.data
		let xdata=dataList.map(item=>{
			return item.xdataDateStr.substring(5);
		}) 
		let ydata=dataList.map(item=>{
			return item.measureValue
		})
		chartDataSoilPh.value.categories=xdata
		chartDataSoilPh.value.series[0]={name:"土壤pH值",data:ydata}
	})
}


/**
 * 土壤测量数据的三个分析图
 */
//土壤氮磷钾
const chartDataSoilDLJ = ref({
	categories:[],
	series:[]
})
const optsSoilDLJ = ref({
        color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
        padding: [15,10,0,15],
        enableScroll: false,
        legend: {},
        xAxis: {
          disableGrid: true
        },
        yAxis: {
          gridType: "dash",
          dashLength: 2,
        },
        extra: {
          line: {
            type: "straight",
            width: 2,
            activeType: "hollow"
          }
        }
      }
)
function getServerDataSoilDLJ() {
      //模拟从服务器获取数据时的延时
    setTimeout(() => {
        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
        let res = {
            categories:[],
            series: []
          };
        chartDataSoilDLJ.value = JSON.parse(JSON.stringify(res));
      }, 500);
}

//土壤温度
const chartDataSoilTemperature = ref({
	categories:[],
	series:[]
})
const optsSoilTemperature = ref({
        color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
        padding: [15,10,0,15],
        enableScroll: false,
        legend: {},
        xAxis: {
          disableGrid: true
        },
        yAxis: {
          gridType: "dash",
          dashLength: 2,
        },
        extra: {
          line: {
            type: "straight",
            width: 2,
            activeType: "hollow"
          }
        }
      }
)
function getServerDataSoilTemperature() {
      //模拟从服务器获取数据时的延时
    setTimeout(() => {
        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
        let res = {
            categories:getLastSevenDays(),
            series: [
              // {
              //   name: "土壤含氮量",
              //   data: [15,8,25,17,14,20]
              // },
              // {
              //   name: "土壤含磷量",
              //   data: [7,14,15,10,14,18]
              // },
              // {
              //   name: "土壤含钾量",
              //   data: [10,8,15,15,12,13]
              // }
            ]
          };
        chartDataSoilTemperature.value = JSON.parse(JSON.stringify(res));
      }, 500);
}

//土壤PH值
const chartDataSoilPh = ref({
	categories:[],
	series:[]
})
const optsSoilPh = ref({
        color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
        padding: [15,10,0,15],
        enableScroll: false,
        legend: {},
        xAxis: {
          disableGrid: true
        },
        yAxis: {
          gridType: "dash",
          dashLength: 2,
        },
        extra: {
          line: {
            type: "straight",
            width: 2,
            activeType: "hollow"
          }
        }
      }
)
function getServerDataSoilPh() {
      //模拟从服务器获取数据时的延时
    setTimeout(() => {
        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
        let res = {
            categories:getLastSevenDays(),
            series: [
              // {
              //   name: "土壤含氮量",
              //   data: [15,8,25,17,14,20]
              // },
              // {
              //   name: "土壤含磷量",
              //   data: [7,14,15,10,14,18]
              // },
              // {
              //   name: "土壤含钾量",
              //   data: [10,8,15,15,12,13]
              // }
            ]
          };
        chartDataSoilPh.value = JSON.parse(JSON.stringify(res));
      }, 500);
}

</script>

<style lang="scss">
	.uni-card {
		.uni-card__header{
			margin-top: 20rpx;
			.uni-card__header-content{
				margin-left: 20rpx;
			}
		}
	}
	.modechooose{
		display: flex;
		flex-direction: row;
		font-size: 13px;
		margin-left: 70rpx;
		.uni-body{
			margin-left: 30rpx;
		}
		
	}
	.datalang{
		margin-top: 30rpx;
	}
	.uni-list-cell {
		position: relative;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		
		.uni-list-cell-pd {
			padding: 22rpx 30rpx;
		}
		.uni-list-cell-db {
			margin-left: 20rpx;
			flex: 1;
		}
	}
	.datadetail{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 100%;
		.detail_item{
			width: 50%;
		}
		.fixed-size-card {
			// flex: 0 0 calc(45% - 10px); /* 2 cards per row with some spacing */
			// margin-bottom: 20px;
			// margin-left: 1rpx;
			// width: 160px; /* 固定宽度 */
			// height: 100px; /* 固定高度 */
		}
		.datadetail-small{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10px;
		
			.uni-body1{
				font-size: 18px;
				font-weight: bold;
				// margin-left: 10rpx;
			}
			.uni-body2{
				display: flex;
				margin-left: auto;
			}
		}
	}
	
	.charts-box {
	    width: 100%;
	    height:  700rpx;
		margin-top: 15rpx;
	}
	
	
	
	
</style>